import {createRouter, createWebHashHistory} from "vue-router"

const routes = [
    {
        // 登录界面
        path : "/",
        name : "login",
        // 按需引入页面
        // 如下的注释中的webpackxxx在打包之后会保留名字为 Login.xx.js
        component : ()=>import(/*webpackChunkName:'Login'*/ '@/page/login/LoginPage.vue')
    },
    {
        // 首页
        path : "/home",
        name : "home",
        // 按需引入页面
        // 如下的注释中的webpackxxx在打包之后会保留名字为 Home.xx.js
        component : ()=>import(/*webpackChunkName:'Home'*/ '@/page/home/HomePage.vue'),
        // 定位到首页时，默认显示的子路由
        redirect: { name: 'user' }, // 重定向到 user 子路由
        // @TODO meta 用于存储路由的元信息，可以在路由守卫中使用
        // 子路由
        children: [
            {
                // 首页子路由
                path: "dashboard",
                name: "dashboard",
                component: () => import(/*webpackChunkName:'Dashboard'*/ '@/page/home/DashboardPage.vue')
            },
            {
                // 用户管理子路由
                path: "user",
                name: "user",
                component: () => import(/*webpackChunkName:'User'*/ '@/page/admin/UserPage.vue')
            },
            {
                // 订单管理子路由
                path: "order",
                name: "order",
                component: () => import(/*webpackChunkName:'Order'*/ '@/page/order/OrderPage.vue')
            },
            {
                // 文章管理子路由
                path: "content",
                name: "content",
                component: () => import(/*webpackChunkName:'Content'*/ '@/page/content/ContentPage.vue')
            },
            {
                // 新增文章子路由
                path: "content/add",
                name: "contentAdd",
                component: () => import(/*webpackChunkName:'ContentAdd'*/ '@/page/content/ContentAddPage.vue')
            },
            {
                // 编辑文章子路由
                path: "content/edit/:id",
                name: "contentEdit",
                component: () => import(/*webpackChunkName:'ContentEdit'*/ '@/page/content/ContentEditPage.vue')
            }
        ]
    },
]

// 创建路由实例
// 该对象可以被import到主js中，并且
const router = createRouter({
    // history 是 Vue Router 用来控制路由行为的核心部分，它决定了 URL 的表现形式以及如何与浏览器的历史记录进行交互。
    // // Vue Router 提供了三种内置的 history 模式：
    // createWebHashHistory()（哈希模式）
    // createWebHistory()（HTML5 模式）
    // createMemoryHistory()（内存模式，主要用于 SSR 或测试）
    history: createWebHashHistory(), // 使用hash模式, 类似 http://example.com/#/about, # 后面的部分就是 hash, 不需要服务器配置，因为 hash 部分不会发送到服务器
    // routes表示路由表
    // 可以把 routes 看作是一个“地图”，告诉 Vue Router： 当用户访问某个路径（URL）时，应该显示哪个组件
    routes 
})

export default router